<template>
    <div class="detect-box">
        <div class="serve-real flex">
            <div class="real-left flex-left">
                <div class="real-headline flex-s b-left b-right">
                    <div class="real-button real-button-left " :class="interface.button == 0 ? 'real-opt' : ''"
                        @click="setInterface(0)">传输界面</div>
                    <div class="real-button real-button-right" :class="interface.button == 1 ? 'real-opt' : ''"
                        @click="setInterface(1)">地图界面</div>
                </div>

                <div class="chat-box">
                    <div>
                        <ChatWindow ref="chat" v-if="message.button != 2"></ChatWindow>
                        <div v-else style="height: calc(100vh - 300px); width: 100%;" class="flex-s" >
                            <div >
                                <img src="@/assets/img/customer-service.png"
                                        style="width: 75px;height: 75px;">
                                        <div style="text-align: center; color: white;font-size: 16px;">在 线 语 音</div>
                            </div>
                            
                        </div>
                    </div>
                    <div class="chat-end" v-show="message.button == 0">
                        <div class="chat-hint">低速传输（限制30个字符）</div>
                        <div class="chat-input-box flex-s">
                            <el-input class="chat-input" v-model="chat.input" maxlength="30" @keyup.enter="send"></el-input>
                            <div class="chat-button cursor" @click="send">发送</div>
                        </div>
                    </div>

                    <div class="chat-end chat-audio flex-s" v-show="message.button == 1">
                        <div class="audio-box flex-s">
                            <div class="flex-left audio-button1 cursor">
                                <div class="flex-s">点击录音<img src="@/assets/img/audio.png"
                                        style="width: 20px;height: 20px;margin-left: 5px;"></div>
                            </div>
                            <div class="flex-left">当前无录音</div>
                            <div class="flex-right audio-button2 cursor">
                                <div class="flex-s">上传音频<img src="@/assets/img/upload-2.png"
                                        style="width: 20px;height: 20px;margin-left: 5px;"></div>
                            </div>
                            <div class="flex-left">当前无录音</div>

                        </div>
                    </div>

                    <div class="chat-end chat-audio flex-s" v-show="message.button == 2">
                        <div class="audio-box flex-s">
                            <div class="flex-left audio-button3 cursor">
                                <div class="flex-s">按下通话</div>
                            </div>
                            <div class="flex-left audio-hint">
                                请使用麦克风说话
                            </div>
                            <img src="@/assets/img/customerservice.png" style="width: 70px; height: 70px;" />
                        </div>
                    </div>
                </div>
            </div>
            <div class="real-right flex-right">
                <div class="real-headline flex-s b-right">
                    <div class="real-button real-button-left" :class="message.button == 0 ? 'real-opt' : ''"
                        @click="setMessage(0)">
                        LORA传输</div>
                    <div class="real-button" :class="message.button == 1 ? 'real-opt' : ''" @click="setMessage(1)">离线语音
                    </div>
                    <div class="real-button real-button-right" :class="message.button == 2 ? 'real-opt' : ''"
                        @click="setMessage(2)">在线语音</div>
                </div>

                <div class="station-box ">
                    <div class="gray">所有电台统计</div>
                    <div class="flex-s">
                        <div style="margin-top: 30px;width: 100px;text-align: center;">
                            <div>总计</div>
                            <div><text style="font-size: 30px;">{{ station.num }}</text>台</div>
                        </div>
                        <ProgressBar :size="100" :strokeWidth="18" :percentage="station.numOn" color="#2BA0C8" text="在线台站"
                            style="margin:0 20px;"></ProgressBar>
                        <ProgressBar :size="100" :strokeWidth="18" :percentage="station.numOff" color="#CD6868" text="离线台站">
                        </ProgressBar>
                    </div>
                </div>


                <div class="station-function station-lora">
                    <div class="gray">传输电台</div>
                    <div class="station-li">
                        <div class="flex p_20">
                            <div class="lh-40">选择电台:</div>
                            <el-select v-model="loraData.stationIndex" placeholder="选择电台" class="input-blue"
                                style="width:400px;">
                                <el-option v-for="item in loraData.stationArr" :key="item.id" :label="item.name"
                                    :value="item.id">
                                </el-option>
                            </el-select>
                        </div>
                    </div>

                    <div class="gray">发射设置</div>
                    <div class="flex station-li">
                        <div class="lh-40 w80 t-rihgt">编码方式:</div>
                        <el-select v-model="loraData.codingArrIndex" placeholder="编码方式" class="input-blue"
                            style="width: 150px;">
                            <el-option v-for="item in loraData.codingArr" :key="item.id" :label="item.name"
                                :value="item.id">
                            </el-option>
                        </el-select>

                        <div class="lh-40 w80 t-rihgt">参数类型:</div>
                        <el-select v-model="loraData.typeIndex" placeholder="参数类型" class="input-blue" style="width: 150px;">
                            <el-option v-for="item in loraData.typeArr" :key="item.id" :label="item.name" :value="item.id">
                            </el-option>
                        </el-select>

                        <div class="lh-40 w80 t-rihgt">内容编码:</div>
                        <el-select v-model="loraData.contentIndex" placeholder="内容编码" class="input-blue"
                            style="width: 150px;">
                            <el-option v-for="item in loraData.contentArr" :key="item.id" :label="item.name"
                                :value="item.id">
                            </el-option>
                        </el-select>
                    </div>


                    <div class="flex">
                        <div class="lh-40 w80 t-rihgt">发射频率:</div>
                        <el-input style="width: 100px;" placeholder="0" v-model="loraData.MHz"
                            class="input-blue"></el-input>
                        <div class="lh-40 t-rihgt" style="margin-right: 20px;">MHz</div>
                        <div class="lh-40  t-rihgt">宽带:</div>
                        <el-input style="width: 100px;" placeholder="0" v-model="loraData.KHz"
                            class="input-blue"></el-input>
                        <div class="lh-40 t-rihgt" style="margin-right: 20px;">KHz</div>
                        <div class="lh-40  t-rihgt">信道:</div>
                        <el-select v-model="loraData.aisleIndex" placeholder="信道" class="input-blue" style="width: 100px;">
                            <el-option v-for="item in loraData.aisleArr" :key="item.id" :label="item.name" :value="item.id">
                            </el-option>
                        </el-select>
                        <div class="lh-40 t-rihgt">功率:</div>
                        <el-select v-model="loraData.powerIndex" placeholder="功率" class="input-blue" style="width: 100px;">
                            <el-option v-for="item in loraData.powerArr" :key="item.id" :label="item.name" :value="item.id">
                            </el-option>
                        </el-select>
                    </div>

                    <div class="gray" style="margin-top: 20px;">接收设置</div>
                    <div class="flex station-li" v-show="message.button == 0">
                        <div class="lh-40 w80 t-rihgt">接收频率:</div>
                        <el-input style="width: 150px;" placeholder="0" v-model="loraData.reception"
                            class="input-blue"></el-input>
                        <div class="lh-40 t-rihgt" style="margin-right: 20px;">MHz</div>
                        <div class="oval-button flex-right">执行</div>
                    </div>

                    <div class="station-li" v-show="message.button == 1 || message.button == 2">


                        <div class="flex station-li">
                            <div class="lh-40 w80 t-rihgt">编码方式:</div>
                            <el-select v-model="loraData.codingArrIndex" placeholder="编码方式" class="input-blue"
                                style="width: 150px;">
                                <el-option v-for="item in loraData.codingArr" :key="item.id" :label="item.name"
                                    :value="item.id">
                                </el-option>
                            </el-select>
                            <div class="lh-40 w80 t-rihgt">音频模式:</div>
                            <el-select v-model="loraData.codingArrIndex" placeholder="音频模式" class="input-blue"
                                style="width: 150px;">
                                <el-option v-for="item in loraData.codingArr" :key="item.id" :label="item.name"
                                    :value="item.id">
                                </el-option>
                            </el-select>
                        </div>
                        <div class="flex station-li">
                            <div class="lh-40 w80 t-rihgt">发送频率:</div>
                            <el-input style="width: 150px;" placeholder="0" v-model="loraData.reception"
                                class="input-blue"></el-input>
                            <div class="lh-40 t-rihgt" style="margin-right: 20px;">MHz</div>
                            <div class="lh-40  t-rihgt">信道:</div>
                            <el-select v-model="loraData.codingArrIndex" placeholder="信道" class="input-blue"
                                style="width: 150px;">
                                <el-option v-for="item in loraData.codingArr" :key="item.id" :label="item.name"
                                    :value="item.id">
                                </el-option>
                            </el-select>
                        </div>

                        <div>
                            <div class="flex station-li">
                                <div class=" w80 t-rihgt reception-text" :class="loraData.receptionValue?'':'reception-yes'">停止接收:</div>
                                <el-switch v-model="loraData.receptionValue" class="reception" 
                                style="--el-switch-on-color: #2C334C; --el-switch-off-color: #2C334C" />
                                <div class="reception-text" :class="loraData.receptionValue?'reception-yes':''">接收</div>
                            </div>
                           
                        </div>

                    </div>
                </div>

            </div>
        </div>
    </div>
</template>
    
<script>

import ProgressBar from '@/components/ProgressBar/index.vue';
import ChatWindow from '@/components/ChatWindow/index.vue';

export default {
    props: {

    },
    data() {
        return {
            interface: {
                button: 0,
            },
            message: {
                button: 0
            },
            chat: {
                input: '',
            },
            station: {
                num: 100,
                numOn: 25,
                numOff: 75,
            },
            loraData: {
                receptionValue: true,
                stationIndex: 0,
                stationArr: [
                    { id: 0, name: '重庆渝北1001' },
                    { id: 1, name: '重庆渝北1002' },
                    { id: 2, name: '重庆南岸1003' },
                    { id: 3, name: '广州白云1004' },
                ],
                codingIndex: 0,
                codingArr: [
                    { id: 0, name: 'LORA' },
                    { id: 1, name: 'CO' },
                ],
                typeIndex: 0,
                typeArr: [
                    { id: 0, name: '1' },
                    { id: 1, name: '2' },
                ],
                contentIndex: 0,
                contentArr: [
                    { id: 0, name: 'BASE64' },
                    { id: 1, name: '2' },
                ],
                aisleIndex: 0,
                aisleArr: [
                    { id: 0, name: '01' },
                    { id: 1, name: '02' },
                ],
                powerIndex: 0,
                powerArr: [
                    { id: 0, name: '1' },
                    { id: 1, name: '2' },
                ],
                MHz: null,
                KHz: null,
                reception: null,
            }

        }
    },
    components: {
        ProgressBar,
        ChatWindow,
    },
    methods: {
        setInterface(index) {
            this.interface.button = index;
        },
        setMessage(index) {
            this.message.button = index;
        },
        send() {
            if (this.chat.input == '' || this.chat.input == null) {
                return
            }
            this.$refs.chat.send(this.chat.input);
            this.chat.input = '';
        }
    }
}
</script>

<style lang="scss">
.detect-box {
    background: linear-gradient(to left, #1D2435, #2C334C);

    .b-left {
        border-left: 2px black solid;
    }

    .b-right {
        border-right: 2px black solid;
    }

    .b-top {
        border-top: 2px black solid;
    }

    .b-bottom {
        border-bottom: 2px black solid;
    }
}

.serve-real {
    border-top: black 2px solid;
    width: 100%;

    .real-left,
    .real-right {
        width: 50%;

        .real-headline {
            background: linear-gradient(to right, #313B53, #272F43);
            height: 80px;

            .real-button {
                cursor: pointer;
                border: solid 2px #9A9DAA;
                width: 100px;
                color: #9A9DAA;
                text-align: center;
                height: 30px;
                font-size: 14px;
                line-height: 30px;
            }

            .real-button-left {
                border-radius: 30px 0 0 30px;
            }

            .real-button-right {
                border-radius: 0 30px 30px 0;
            }

            .real-opt {
                background: #9A9DAA;
                color: rgba(0, 0, 0, 0.45);
            }
        }
    }

    .real-left {
        .chat-box {
            position: relative;
            height: calc(100vh - 166px);
            width: calc(100% - 4px);
            border: solid 2px black;
            background-color: #171D2C;
        }

        .chat-end {
            position: absolute;
            bottom: 0px;
            background: linear-gradient(to right, #313B53, #272F43);
            height: 80px;
            width: 100%;

            .chat-hint {
                color: #2CA6E0;
                position: absolute;
                top: -25px;
                left: 20px;
            }

            .chat-input-box {
                margin-top: 20px;

                .chat-input {
                    width: 70%;
                    height: 40px;
                }

                .el-input__wrapper {
                    background-color: #394760;
                    box-shadow: 0 0 0 0;
                }

                .el-input {
                    --el-input-text-color: #EEEEEE;
                }

                .chat-button {
                    width: 150px;
                    background: linear-gradient(to bottom, #F0A12A, #BB5F0A);
                    height: 40px;
                    line-height: 40px;
                    text-align: center;
                    cursor: pointer;
                    color: #eeeeee;
                }
            }
        }

        .chat-audio {
            background: linear-gradient(to right, #2C334C, #1D2435);
            height: 120px;

            .audio-box {
                border-radius: 5px;
                background: #394760;
                height: 80px;
                margin: 20px;
                width: calc(100% - 40px);
                padding: 0 20px;
                color: #969CAF;
            }
        }

        .audio-button1 {
            background-color: #3869C4;
            border-radius: 5px;
            color: white;
            width: 120px;
            height: 35px;
            line-height: 35px;
            margin-right: 5px;
        }

        .audio-button2 {
            border-radius: 5px;
            border: solid 1px white;
            color: white;
            width: 120px;
            height: 35px;
            line-height: 35px;
            margin-right: 5px;

        }

        .audio-button3 {
            background-color: #00BBF0;
            border-radius: 5px;
            color: white;
            width: 400px;
            height: 35px;
            line-height: 35px;
            margin-right: 5px;
        }

        .audio-hint {
            color: #EA5B50;
            margin-left: 10px;
        }


    }

    .real-right {
        .station-box {
            height: 140px;
            border-top: 2px black solid;
            border-bottom: 2px black solid;
            padding: 10px 20px;
            color: #9A9DAA;
            font-size: 14px;
        }

        .station-li {
            padding-top: 10px;
            padding-bottom: 10px;
        }

        .station-function {
            height: calc(100vh - 348px);
            border-bottom: 2px black solid;
            padding: 10px 20px;
            color: #9A9DAA;
            font-size: 14px;

            .reception {
                margin: 0 20px;
                .el-switch__core {
                    box-sizing: 0 0 0;
                    border: solid 2px white;
                }

                .el-switch__action {
                    border: solid 2px white;
                    background: none;
                }
            }
            .reception-text{
                line-height: 30px;
            }
            .reception-yes{
                color: white;
            }
        }

        .input-blue {
            .el-input__inner {
                height: 40px;
            }
        }



    }


}
</style>
    